<template>
  <!-- <div id="app">
    <router-link/>
    <button @click="gotoDemo()">aaa</button>
    
  </div> -->
  <div id="app">
    <!-- <Info/> -->
     <router-view></router-view>
    <!-- <header> -->
      <!-- <nav> -->
        <!-- <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/ChoseIMG">解锁的卡片</router-link> -->
      <!-- </nav> -->
    <!-- </header> -->
    
    <!-- <button @click="gotoDemo()">aaa</button> -->
  </div>
</template>

<script>
import Info from './views/Info.vue';
export default {
  name: 'App',
  components:{
    Info
  },
  methods: {
    gotoDemo(){
      this.$router.push({
          path: "/About",
          query: {
            
          }
        });
    }
  },
};
</script>

<style>
/* 你的样式 */
#app{
  height: 100%;
  width: 100%;
}
.btn {
  display: block;
  padding: 8px 24px;
  margin: 10px auto;
  font-size: 1.1rem;
  font-weight: 500;
  outline: none;
  text-decoration: none;
  color: #484b57;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 25px;
  cursor: pointer;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  animation: gelatine 0.5s 1;
}
@keyframes gelatine {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
</style>

